<template>
  <div class="content cs">
    <ul class="pick fx">
      <li class="item" v-for="(item, i) in svgs" :key="i" @click='choose(item)'>
        <img :src="item" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ExpressionContent",
  data() {
    return {
      svgs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
        (item, i) => `http://localhost:3002/${i + 1}.svg`
      ),
    };
  },
  methods: {
      choose(url) {
          this.$bus.$emit('getEmoit', url);
      }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 30rem;
  height: 20rem;
  img {
    width: 2rem;
    height: 2rem;
  }
  .pick {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>